<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import $api from '@/api/api'

const returnRecords = ref([])
const notReturnedRecords = ref([])
const loadingReturn = ref(false)
const loadingNotReturn = ref(false)

const fetchReturnRecords = async () => {
  loadingReturn.value = true
  try {
    const res = await $api.getReturnRecord()
    if (res.code === 1) {
      returnRecords.value = res.data || []
    } else {
      ElMessage.error(res.msg || '获取借书历史失败')
    }
  } catch (e) {
    ElMessage.error('获取借书历史失败')
  } finally {
    loadingReturn.value = false
  }
}

const fetchNotReturnedRecords = async () => {
  loadingNotReturn.value = true
  try {
    const res = await $api.getNotReturnedRecord()
    if (res.code === 1) {
      notReturnedRecords.value = res.data || []
    } else {
      ElMessage.error(res.msg || '获取未还书情况失败')
    }
  } catch (e) {
    ElMessage.error('获取未还书情况失败')
  } finally {
    loadingNotReturn.value = false
  }
}

onMounted(() => {
  fetchReturnRecords()
  fetchNotReturnedRecords()
})

const columns = [
  { prop: 'bname', label: '书名', minWidth: '120' },
  { prop: 'barCode', label: '条形码', minWidth: '120' },
  { prop: 'borDate', label: '借阅日期', minWidth: '110' },
  { prop: 'retDate', label: '应还日期', minWidth: '110' },
  { prop: 'realRetDate', label: '实际归还日期', minWidth: '110' },
  { prop: 'retStatus', label: '归还状态', minWidth: '90' },
  { prop: 'fineMoney', label: '罚款金额', minWidth: '90' },
  { prop: 'fineStatus', label: '罚款状态', minWidth: '90' },
]
</script>

<template>
  <div class="user-record-page">
    <el-card class="record-card not-returned-card" shadow="always">
      <template #header>
        <div class="card-header not-returned">
          <el-icon class="icon-warning"><i class="el-icon-warning-outline" /></el-icon>
          <span>未还书情况</span>
        </div>
        <div class="header-divider"></div>
      </template>
      <el-table :data="notReturnedRecords" v-loading="loadingNotReturn" border stripe class="record-table">
        <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :min-width="col.minWidth" />
      </el-table>
    </el-card>

    <el-card class="record-card returned-card" shadow="hover">
      <template #header>
        <div class="card-header returned">
          <el-icon class="icon-success"><i class="el-icon-success-filled" /></el-icon>
          <span>借书历史</span>
        </div>
        <div class="header-divider"></div>
      </template>
      <el-table :data="returnRecords" v-loading="loadingReturn" border stripe class="record-table">
        <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :min-width="col.minWidth" />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.user-record-page {
  max-width: 1300px;
  margin: 0 auto;
  padding: 48px 10px 60px 10px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  background: linear-gradient(120deg, #e4ecfb 0%, #f5f7fa 100%);
  min-height: 100vh;
}
.record-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 8px 32px 0 rgba(120,120,200,0.13);
  padding-bottom: 18px;
  transition: box-shadow 0.3s, transform 0.3s;
  overflow: hidden;
  border: 1.5px solid #e6eaf3;
}
.record-card:hover {
  box-shadow: 0 16px 48px 0 rgba(120,120,200,0.18);
  transform: translateY(-4px) scale(1.01);
}
.card-header {
  font-size: 22px;
  font-weight: bold;
  color: #303133;
  padding: 18px 0 10px 0;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #f7faff 60%, #e9f0fb 100%);
  border-radius: 22px 22px 0 0;
  position: relative;
  z-index: 2;
  gap: 12px;
}
.card-header.not-returned {
  color: #e6a23c;
}
.card-header.returned {
  color: #67c23a;
}
.icon-warning {
  font-size: 1.7em;
  color: #e6a23c;
  filter: drop-shadow(0 2px 6px #fff3e0);
}
.icon-success {
  font-size: 1.7em;
  color: #67c23a;
  filter: drop-shadow(0 2px 6px #e0ffe0);
}
.header-divider {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #e0e7ef 0%, #f7faff 100%);
  margin-bottom: 0px;
  opacity: 0.7;
}
.record-table {
  margin: 12px 0 0 0;
  border-radius: 14px;
  overflow: hidden;
  font-size: 16px;
  background: #fcfcfd;
  transition: box-shadow 0.2s;
}
.record-table :deep(.el-table__header th) {
  background: linear-gradient(90deg, #f7faff 60%, #e4ecfb 100%);
  color: #5a5a7a;
  font-weight: 700;
  font-size: 16px;
}
.record-table :deep(.el-table__row) {
  transition: background 0.2s;
}
.record-table :deep(.el-table__row:hover) {
  background: #f0f4ff;
}
.not-returned-card {
  border-left: 6px solid #e6a23c33;
}
.returned-card {
  border-left: 6px solid #67c23a33;
}

/* 响应式布局 */
@media (max-width: 900px) {
  .user-record-page {
    padding: 24px 2px 30px 2px;
    gap: 20px;
  }
  .record-card {
    border-radius: 12px;
  }
  .card-header {
    font-size: 17px;
    padding: 12px 0 8px 0;
    border-radius: 12px 12px 0 0;
  }
  .record-table {
    font-size: 13px;
    border-radius: 8px;
  }
}
</style>
